<script setup lang="ts">
//... existing code ...

/**
 * 获取支付状态文本
 */
const getPaymentStatusText = (status: number | null | undefined) => {
  switch (status) {
    case 0:
      return '未支付';
    case 1:
      return '已支付';
    case 2:
      return '部分支付';
    case 3:
      return '退款中';
    case 4:
      return '已退款';
    default:
      return '未设置';
  }
}

//... existing code ...
</script>

<template>
  <div class="orders-list-page">
    <div class="orders-header">
      <div class="header-title">
        <h2>销售订单管理</h2>
        <div class="header-subtitle">管理所有客户的订单信息和状态</div>
      </div>
      <div class="header-actions">
        <el-button 
          type="primary" 
          @click="handleAdd"
          tabindex="0"
        >
          <Icon name="el-icon-Plus" class="icon-margin" /> 新增订单
        </el-button>
        <el-button 
          @click="handleExport" 
          :loading="exporting"
          tabindex="0" 
        >
          <Icon name="el-icon-Download" class="icon-margin" /> 导出订单
        </el-button>
      </div>
    </div>

    <div class="search-filter-section">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="订单编号">
          <el-input 
            v-model="searchForm.order_no" 
            placeholder="输入订单编号" 
            clearable
            tabindex="0"
          />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input 
            v-model="searchForm.customer_name" 
            placeholder="输入客户名称" 
            clearable
            tabindex="0"
          />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select 
            v-model="searchForm.status" 
            placeholder="选择订单状态" 
            clearable
            tabindex="0"
          >
            <el-option 
              v-for="item in statusOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value"
              tabindex="0"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="订单日期">
          <el-date-picker
            v-model="searchForm.date_range"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            tabindex="0"
          />
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleSearch"
            tabindex="0"
          >
            <Icon name="el-icon-Search" class="icon-margin" /> 搜索
          </el-button>
          <el-button 
            @click="resetSearch"
            tabindex="0"
          >
            <Icon name="el-icon-RefreshRight" class="icon-margin" /> 重置
          </el-button>
        </el-form-item>
      </el-form>
      <div class="filter-tags" v-if="hasFilters">
        <el-tag 
          v-for="(tag, index) in filterTags" 
          :key="index"
          closable
          @close="removeFilter(tag.key)"
          tabindex="0"
        >
          {{ tag.label }}: {{ tag.value }}
        </el-tag>
        <el-button 
          type="text" 
          @click="resetSearch"
          tabindex="0"
        >
          清除全部
        </el-button>
      </div>
    </div>

    <!-- 表格部分 -->
    <div class="orders-table-container">
      <el-table
        v-loading="loading"
        :data="orderList"
        border
        style="width: 100%"
        :header-cell-style="{ 'background-color': '#f5f7fa', color: '#606266' }"
        highlight-current-row
        @sort-change="handleSortChange"
      >
        <el-table-column prop="order_no" label="订单编号" min-width="150" sortable>
          <template #default="{ row }">
            <div class="order-no">
              <span 
                class="order-link" 
                @click="viewOrderDetail(row.id)"
                tabindex="0"
                role="button"
              >
                {{ row.order_no }}
              </span>
              <el-tag 
                v-if="row.urgent" 
                type="danger" 
                size="small" 
                class="order-tag urgent-tag"
              >
                加急
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="customer_name" label="客户名称" min-width="120">
          <template #default="{ row }">
            <el-tooltip
              v-if="row.customer_id"
              :content="`查看客户详情 (ID: ${row.customer_id})`"
              placement="top"
            >
              <div 
                class="customer-name-cell"
                tabindex="0"
                role="button"
                @click="viewCustomerDetail(row.customer_id)"
              >
                <Icon name="el-icon-User" class="icon-margin" /> {{ row.customer_name }}
              </div>
            </el-tooltip>
            <div v-else>
              {{ row.customer_name || '未关联客户' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total_amount" label="订单金额" min-width="120" sortable>
          <template #default="{ row }">
            <span class="amount-text">{{ formatCurrency(row.total_amount) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payment_status" label="支付状态" min-width="120">
          <template #default="{ row }">
            <el-tag
              :type="getPaymentStatusType(row.payment_status)"
              effect="light"
            >
              {{ getPaymentStatusText(row.payment_status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="order_status" label="订单状态" min-width="120" sortable>
          <template #default="{ row }">
            <el-tag
              :type="getOrderStatusType(row.status)"
              effect="light"
            >
              {{ getOrderStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_time" label="下单时间" min-width="170" sortable>
          <template #default="{ row }">
            <div class="time-info">
              <span>{{ formatDate(row.created_time) }}</span>
              <span class="time-ago">{{ getTimeAgo(row.created_time) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="actions" label="操作" min-width="180" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button 
                size="small" 
                @click="viewOrderDetail(row.id)"
                tabindex="0"
              >
                查看
              </el-button>
              <el-button 
                size="small" 
                type="primary" 
                @click="handleEdit(row)"
                :disabled="!canEdit(row.status)"
                tabindex="0"
              >
                编辑
              </el-button>
              <el-dropdown trigger="click">
                <el-button 
                  size="small" 
                  class="more-actions-btn"
                  tabindex="0"
                >
                  更多<el-icon class="el-icon--right"><Icon name="el-icon-ArrowDown" /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item 
                      @click="handlePrint(row)"
                      tabindex="0"
                    >
                      <Icon name="el-icon-Printer" class="icon-margin" /> 打印订单
                    </el-dropdown-item>
                    <el-dropdown-item 
                      @click="handleDuplicate(row)"
                      tabindex="0"
                    >
                      <Icon name="el-icon-CopyDocument" class="icon-margin" /> 复制订单
                    </el-dropdown-item>
                    <el-dropdown-item 
                      v-if="canCancel(row.status)" 
                      @click="handleCancel(row)"
                      tabindex="0"
                    >
                      <Icon name="el-icon-CircleClose" class="icon-margin" /> 取消订单
                    </el-dropdown-item>
                    <el-dropdown-item 
                      divided
                      v-if="canDelete(row.status)" 
                      @click="handleDelete(row)"
                      tabindex="0"
                    >
                      <span class="text-danger">
                        <Icon name="el-icon-Delete" class="icon-margin" /> 删除订单
                      </span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.limit"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </div>
  </div>
</template>

//... existing code ... 